<template>
  <div class="app-container">
    <operation-center @getId="handleNodeClick"/>
    <div class="right-box">
      <el-card shadow="never">
        <div slot="header" class="clearfix" style="display: flex;justify-content: space-between;align-items: center">
          <span>作业范围</span>
          <el-button type="primary">编辑</el-button>
        </div>
        <div style="display: flex;align-items: center">
          <span style="display: block;width: 120px;">关键词地区：</span>
          <el-input v-model="keyword"></el-input>
        </div>
          <baidu-map :center="center" :zoom="10" class="bm-view">
            <bm-polygon :path="polygonPath" fillColor="#ECCAC6" stroke-color="#EA6F3C" strokeStyle="dashed" :stroke-opacity="0.5" :stroke-weight="1"/>
            <bm-local-search :auto-viewport="true" :keyword="keyword"></bm-local-search>
          </baidu-map>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getOrganArea } from '@/api/business-hall'
import OperationCenter from '@/views/branches/components/operationCenter.vue'
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'

export default {
  name: 'scopeOfWork',
  components: {
    OperationCenter,
    BaiduMap
  },
  data () {
    return {
      userpageData: {
        agencyId: 0,
        page: 1,
        pageSize: 5
      },
      center: { lng: 116.404, lat: 39.915 },
      polygonPath: [
        { lng: 116.412732, lat: 39.911707 },
        { lng: 116.39455, lat: 39.910932 },
        { lng: 116.403461, lat: 39.921336 }
      ],
      keyword: ''
    }
  },
  async created () {
    await this.handleNodeClick('1024980800111765185')
  },
  methods: {
    async handleNodeClick (id) {
      // console.log(id)
      const { data } = await getOrganArea(id)
      // console.log(data)
      this.center.lng = data.longitude
      this.center.lat = data.latitude
      const polygon1 = JSON.parse(JSON.stringify(data.polygon).replace(/longitude/g, 'lng'))
      const polygon2 = JSON.parse(JSON.stringify(polygon1).replace(/latitude/g, 'lat'))
      this.polygonPath = polygon2
      // this.polygonPath = data.polygon
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  display: flex;
  padding: 0 10px 20px;
  min-width: 900px;

  .right-box {
    width: 100%;
    height: 100%;

    .el-card {
      margin-left: 20px;

      ::v-deep .el-card__header {
        background: #fafafa;
        font-weight: 600;
      }

      ::v-deep .el-input__inner {
        display: inline-block;
        width: 180px;
      }

      .bm-view {
        width: 100%;
        height: 668px;
        padding-top: 22px;
      }
    }
  }
}
</style>
